<template>
  <div id="index-footer">
    <div class="box">
      <div class="top">
        <div class="left">
          <div class="logo">
            <img
              src="https://tm-image.qichacha.com/fa479d6edaf200c15fef3bb08456dbc0.jpg"
              alt=""
            />
            IT在线教育
          </div>
          <div class="intro">代码的尽头是开源</div>
        </div>
        <div class="right">
          <div class="item about">
            <div class="title">关于我们</div>
            <div class="content">
              <div>
                <el-link href="http://company.xxlei.com" target="_blank"
                  >关于我们</el-link
                >
              </div>
              
            </div>
          </div>
          <div class="item follow">
            <div class="title">关注我们</div>
            <div class="content">
              <img
                src="https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF"
                alt=""
              />
              <img
                style="margin-left: 10px"
                src="https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF"
                alt=""
              />
            </div>
          </div>
          <div class="item friend">
            <div class="title">友情链接</div>
            <div class="content">
              <el-link href="http://qukuaiyun.cn" target="_blank"
                >区块云</el-link
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 下面的内容 -->
      <div class="bottom">
        <div>
          网上有害信息举报（涉未成年人）：网站 https://www.12377.cn
          邮箱（涉未成年人） ityiyi@foxmail.com
        </div>
        <div>Copyright @ 2023. Design by IT教育 <el-link href="https://beian.miit.gov.cn/">冀ICP备2022007718号-5</el-link> </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
#index-footer {
  background-color: black;
  color: white;
  padding-bottom: 30px;
}

#index-footer .box {
  width: 85%;
  margin: 0 auto;
}

#index-footer .box .top {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  padding-top: 40px;
}

#index-footer .box .top .left {
  width: 50%;
}

#index-footer .box .top .right {
  width: 50%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  color: #999;
}

#index-footer .box .top .right .item {
  width: 30%;
}
#index-footer .box .top .left .logo {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  align-content: center;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
}

#index-footer .box .top .left .logo img {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

#index-footer .box .top .left .intro {
  font-size: 12px;
  color: gray;
  margin-top: 10px;
}

#index-footer .box .top .right .item .content {
  margin-top: 20px;
  line-height: 20px;
}

#index-footer .box .top .right .follow .content {
  display: flex;
  display: -webkit-box;
  justify-content: flex-start;
}

#index-footer .box .top .right .follow .content img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  cursor: pointer;
}

#index-footer .box .bottom {
  margin-top: 30px;
  font-size: 12px;
  text-align: center;
  color: #999;
  line-height: 24px;
}
</style>